<template>
    <div>
        <div class="container">
            <div class="background-content">
                <div class="text-overlay">
                    <div style="color: #ACBBFF;" class="top-left-text">总收益</div>
                    <div style="font-size: 24px;font-weight: 700;margin: 5px 0;" class="top-left-value">{{ income }}元</div>
                </div>
                <div class="bottom-left">
                    <div style="font-size: 16px;font-weight: 700;" class="bottom-left-value">{{ take_income }}元</div>
                    <div style="font-size: 11px;color: #ACBBFF;" class="bottom-left-text">已提现金额</div>
                </div>
                <div class="top-right">
                    <div style="font-size: 16px;font-weight: 700;" class="top-right-value">{{ wait_income }}元</div>
                    <div style="font-size: 11px;color: #ACBBFF;" class="top-right-text">未提现金额</div>
                </div>
                <div class="rectangle">
                    <span style="font-size: 12px;" @click="goToPage('/pages/profile/Payouts')">提现</span>
                </div>
            </div>
        </div>

        <div v-if="items.length > 0">
            <div v-for="(item, index) in items" :key="index" class="item-container">
                <div class="list-item">
                    <div class="left-text title">{{ item.title }}</div>
                    <div class="right-text price">{{ item.price }}元</div>
                </div>
                <div class="list-item">
                    <div :class="['left-text', getStatusClass(item.info), 'font-size']">{{ item.info }}</div>
                    <div class="right-text font-size">{{ item.createtime }}</div>
                </div>
                <u-line></u-line>
            </div>
        </div>
        <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
        <u-loadmore :status="status" @loadmore="loadMoreData"></u-loadmore>
    </div>
</template>

<script>
import { getIncomeList } from "@/api/apiService";

export default {
  data() {
    return {
      income: '',
      take_income: '',
      wait_income: '',
      items: [],
      pagination: {
        page: 1,
      },
      status: 'loadmore',
    };
  },

  created() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      if (this.status === 'loading') return;
      this.status = 'loading';

      const params = {
        page: this.pagination.page,
      };

      try {
        const response = await getIncomeList(params);
        const newList = response.data.list || [];
        if (newList.length > 0) {
          this.items = [...this.items, ...newList];
          this.status = 'loadmore';
        } else {
          if (response.data.list.length === 0) {
            this.status = 'nomore';
          } else {
            this.status = 'loadmore';
          }
        }
        this.wait_income = response.data.wait_income;
        this.take_income = response.data.take_income;
        this.income = response.data.income;
      } catch (error) {
        console.error("Failed to fetch data:", error);
        this.status = 'loadmore';
      }
    },

    getStatusClass(status) {
      console.log(status)
      switch (status) {
        case '已到账':
          return 'status-success';
        case '订单失效':
          return 'status-fail';
        case '待到账':
          return 'status-processing';
        default:
          return '';
      }
    },
    goToPage(routePath, data) {
		 this.$goToPage(routePath + (data ? JSON.stringify(data) : ''));
      // const income = parseFloat(this.wait_income.replace(/[^0-9.]/g, ''));
      // if (income < 1) {
      //   uni.showToast({
      //     title: '提现金额必须大于或等于100元',
      //     icon: 'none',
      //     //显示持续时间为 2秒
      //     duration: 2000
      //   })
      // } else {
       
      // }
    }
  },

  onReachBottom() {
    if (this.status === 'loadmore') {
      this.pagination.page += 1;
      this.fetchData();
    }
  },
};
</script>

<style scoped>
page {
    background-color: #F6F6F6;
}
.status-success {
  color: #28a745 !important;
}

.status-fail {
  color: #dc3545 !important;
}

.status-processing {
  color: #ffc107 !important;
}
.container {
    display: flex;
    justify-content: center;
    margin: 10px;
    height: 150px;
    background-image: url('/static/10.png');
    background-size: cover;
    position: relative;
}

.background-content {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: space-around;
    color: white;
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    color: #ACBBFF;
    font-size: 12px;
    margin: 3px;
}

.bottom-left,
.top-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.rectangle {
    position: absolute;
    top: 30%;
    right: 0;
    height: 30px;
    padding: 0 20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #FF9F26;
    color: white;
    display: flex;
    align-items: center;
    transform: translate(0, -50%);
}

.item-container {
    padding: 10px 15px;
    background-color: white;
}

.list-item {
    display: flex;
    justify-content: space-between;
}

.font-size {
    font-size: 11px;
    color: #999999;
}

.price {
    font-size: 14px;
    color: #FF9F26;
    font-weight: bold;
}

.title {
    font-size: 13px;
}

.text-overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    color: white;
    left: 30px;
    top: 10px;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.left-text {
    flex: 1;
    text-align: left;
}

.right-text {
    flex: 0 0 auto;
    text-align: right;
}
</style>
